<template>
  <div class="bar" ref="barRef"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
import { solidFlag, unSolidFlag } from './components/data'
// import { getProjectProgress } from '@/api/projectManage/projectList'
// import { parseTime } from '@/utils/util'
// import { getDicts } from '@/api/system/dict/data'
// const { projectId } = inject('projectDetail')
// const { proxy } = getCurrentInstance()

// const pmo_stage_type = ref([])

//正常未完成 1
//正常已完成 2

//超时未完成 3
//超时已完成 4
const barRef = ref()
const data = [
  {
    stage: '阶段1',
    date: '2023-01',
    status: '1',
  },
  {
    stage: '阶段1',
    date: '2023-02',
    status: '2',
  },
]
// 提取年月数据用于横轴
const dates = Array.from(new Set(data.map((item) => item.date))).sort()

const option = ref({
  // title: {
  //   text: "项目进展情况",
  // },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      let tooltip = ''
      params.forEach((param) => {
        tooltip += `${param.data[1]}: ${param.seriesName}<br/>`
      })
      return tooltip
    },
  },
  legend: {
    data: ['正常未完成', '正常已完成', '超时未完成', '超时已完成'],
  },
  xAxis: {
    type: 'category',
    position: 'top',
    nameLocation: 'center',
    axisLabel: {
      interval: 0,
      // rotate: -30
    },
    data: dates, // 年份月份
  },
  yAxis: {
    type: 'category',
    data: Array.from(new Set(data.map((item) => item.stage))).sort(), // 项目阶段
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed', // 设置为虚线
      },
    },
  },
  // dataZoom: [
  //   {
  //     type: 'slider',
  //     xAxisIndex: 0,
  //     start: 0,
  //     end: 100, // 根据需要调整
  //     show: false // 初始不显示滚动条
  //   }
  // ],
  series: [
    {
      name: '正常未完成',
      type: 'scatter',
      symbol: unSolidFlag, //svg代码取path属性
      symbolSize: 20,
      itemStyle: {
        color: '#6db626',
      },
      data: data
        .filter((item) => item.status === '1')
        .map((item) => [item.date.split('-').slice(0, 2).join('-'), item.stage]),
    },
    {
      name: '正常已完成',
      type: 'scatter',
      symbol: solidFlag, // 实心旗帜
      symbolSize: 20,
      itemStyle: {
        color: '#6db626', // 绿色
      },
      data: data
        .filter((item) => item.status === '2')
        .map((item) => [item.date.split('-').slice(0, 2).join('-'), item.stage]),
    },
    {
      name: '超时未完成',
      type: 'scatter',
      symbol: unSolidFlag,
      symbolSize: 20,
      itemStyle: {
        color: '#da0024', // 橙色
      },
      data: data
        .filter((item) => item.status === '3')
        .map((item) => [item.date.split('-').slice(0, 2).join('-'), item.stage]),
    },
    {
      name: '超时已完成',
      type: 'scatter',
      symbol: solidFlag, // 实心小旗
      symbolSize: 20,
      itemStyle: {
        color: '#da0024', // 黄色
      },
      data: data
        .filter((item) => item.status === '4')
        .map((item) => [item.date.split('-').slice(0, 2).join('-'), item.stage]),
    },
  ],
})
let myChart
const init = () => {
  const chartDom = barRef.value
  if (myChart) echarts.dispose(chartDom)
  myChart = echarts.init(chartDom)
  //   handleScroll()
  option.value && myChart.setOption(option.value)
}
// 控制滚动条显示
// const handleScroll = () => {
//   myChart.on('finished', function () {
//     const dataCount = dates.length
//     if (dataCount > 10) {
//       console.log('dataCount:', dataCount)
//       // 根据需要调整阈值
//       myChart.setOption({
//         dataZoom: [
//           {
//             type: 'slider',
//             xAxisIndex: 0,
//             start: 0,
//             end: 50, // 根据需要调整
//             show: true, // 显示滚动条
//           },
//         ],
//       })
//     } else {
//       myChart.setOption({
//         dataZoom: [
//           {
//             type: 'slider',
//             xAxisIndex: 0,
//             show: false, // 不显示滚动条
//           },
//         ],
//       })
//     }
//   })
// }

const resize = () => {
  init()
}

// const initData = async () => {
//   const { data } = await getProjectProgress(projectId)
//   const result = []
//   data.forEach((item) => {
//     item.overviewDTOList.forEach((it) => {
//       const stage = proxy.selectDictLabel(pmo_stage_type.value, '' + item.pmoMenuType) || ''
//       result.push({
//         stage,
//         date: parseTime(it.projectProgressTime, '{y}-{m}-{d}'),
//         status: '' + it.projectProgressStatus,
//       })
//     })
//   })

//   option.value.xAxis.data = Array.from(new Set(result.map((item) => item.date))).sort() //横轴日期
//   // 系列值，第一个是x轴，第二个是纵轴
//   option.value.series[0].data = result.filter((item) => item.status === '1').map((item) => [item.date, item.stage])
//   option.value.series[1].data = result.filter((item) => item.status === '2').map((item) => [item.date, item.stage])
//   option.value.series[2].data = result.filter((item) => item.status === '3').map((item) => [item.date, item.stage])
//   option.value.series[3].data = result.filter((item) => item.status === '4').map((item) => [item.date, item.stage])
//   init()
// }
// const getDic = async () => {
//   const res = await getDicts(['pmo_stage_type'])
//   pmo_stage_type.value = res.data.map((it) => ({
//     label: it.dictLabel,
//     value: it.dictValue,
//   }))
//   option.value.yAxis.data = pmo_stage_type.value.map((it) => it.label)
//   init()
// }
onMounted(() => {
  // getDic()
  // initData()
  setTimeout(() => {
    init()
  })
  window.addEventListener('resize', resize)
})
onUnmounted(() => {
  window.removeEventListener('resize', resize)
})
</script>

<style scoped lang="scss">
.bar {
  // width: 500px;
  width: 100%;
  height: 370px;
}
</style>
